$accordion-padding: 16px;
$accordion-subtitle-height: 16px;
$accordion-background-collapsed: $white; // same as body
$accordion-background-hover: lighten( $gray, 35% );
$accordion-background-expanded: $white;

.accordion {
	box-shadow: 0 -1px 0 lighten( $gray, 26% ),
		0 1px 0 lighten( $gray, 26% );
	margin-top: 1px;
	position: relative;
}

.accordion__header {
	position: relative;
}

.accordion__toggle {
	display: block;
	width: 100%;
	cursor: pointer;
	margin: 0;
	padding: $accordion-padding;
	padding-right: ( $accordion-padding + 22px );
	color: $gray-dark;
	background-color: $accordion-background-collapsed;
	text-align: left;
	transition: all 150ms ease-in;

	&:hover {
		background-color: $accordion-background-hover;

		.accordion__title {
			color: $blue-medium;
		}

		.accordion__arrow {
			color: $blue-medium;
		}
	}

	.accordion__arrow {
		position: absolute;
			top: 50%;
			right: ( $accordion-padding - 4px );
		transform: translateY( -50% );
		color: darken( $gray, 10% );
		height: 24px;
		.gridicon {
			transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease-in;
		}
	}

	.accordion.has-subtitle & {
		padding-top: ( $accordion-padding - $accordion-subtitle-height / 2 );
		padding-bottom: ( $accordion-padding - $accordion-subtitle-height / 2 );
	}
}

.accordion.is-expanded {

	.accordion__toggle {
		background-color: $accordion-background-expanded;

		.accordion__arrow {
			.gridicon {
				transform: rotate( 180deg );
			}
		}
	}

	.accordion__content {
		overflow: visible;
	}
}

.accordion__icon {
	position: absolute;
		left: $accordion-padding;
		top: 50%;
		transform: translateY( -50% );
	margin-top: 3px;

	.gridicon {
		width: 20px;
		height: 20px;
	}
}

.accordion__title,
.accordion__subtitle {
	display: block;
	font-size: 13px;
	font-weight: 500;
	line-height: $accordion-subtitle-height;
	transition: all 150ms ease-in;

	.accordion.has-icon & {
		padding-left: 28px;
	}

	.accordion.has-status & {
		padding-right: 28px;
	}
}

.accordion__subtitle {
	font-size: 11px;
	color: $gray-text-min;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	height: $accordion-subtitle-height;
}

.accordion:not( .is-expanded ) .accordion__toggle .accordion__subtitle {
	&::after {
		@include long-content-fade( $color: $accordion-background-collapsed );
	}
}

.accordion:not( .is-expanded ) .accordion__toggle:hover .accordion__subtitle {
	&::after {
		@include long-content-fade( $color: $accordion-background-hover );
	}
}

.accordion.is-expanded .accordion__subtitle {
	&::after {
		@include long-content-fade( $color: $accordion-background-expanded );
	}
}

.accordion__content {
	overflow: hidden;
	height: 0;
	background-color: $accordion-background-expanded;
}

.accordion.is-expanded .accordion__content {
	height: auto;
}

.accordion__content-wrap {
	padding: 0 $accordion-padding $accordion-padding $accordion-padding;
}

.accordion__section {
	margin-bottom: 24px;
}

.accordion__section:last-child {
	margin-bottom: 0;
}

.accordion__status {
	position: absolute;
		right: ( $accordion-padding + 20px + 4px );
		top: 50%;
	transform: translateY( -50% );
	padding: 4px;

	&::before {
		content: '';
		position: absolute;
			top: 4px;
			left: 4px;
		width: 14px;
		height: 14px;
		background-color: $white;
		border-radius: 50%;
	}

	.gridicon {
		position: relative;
		display: block;
		width: 18px;
		height: 18px;
		margin: -2px;
	}

	&.is-warning {
		color: $alert-yellow;

		&:hover {
			color: lighten( $alert-yellow, 5% );
		}
	}

	&.is-error {
		color: $alert-red;

		&:hover {
			color: lighten( $alert-red, 5% );
		}
	}

	&.is-info {
		color: $blue-wordpress;

		&:hover {
			color: lighten( $blue-wordpress, 5% );
		}
	}
}
